<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>task-07</title>    
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
<link rel="stylesheet" href="task07.css">   
</head>
<body>
    <div class="top">
        <div class="header">
            <div class="logo">
                <img src="task07/task07-logo.png">新世界
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#" id="first-link">首页</a></li>
                    <li><a href="#">最新活动</a></li>
                    <li><a href="#">项目介绍</a></li>
                    <li><a href="#">爱心社区</a></li>
                    <li><a href="#">关于我们</a></li>             
                </ul>
            </div>
            <div class="login">
                <img src="task07/task07-top5.png"><a href="#">登陆</a>
            </div>
        </div>
    </div>
    <div class="banner">
        <img src="task07/task07-bg.jpg">
        <div class="banner-cover"></div>
        <div class="banner-text">
            <h4>Time of new life</h4>
            <p>新时代，年轻的人们让我们一起</p>
            <p>体验新生活，享受新生活</p>
            <div class="banner-botton">开始体验</div>
        </div>
    </div>
    <div class="target">
        <div class="target-menu">
            <img src="task07/task07-top1.png" alt="icon">
            <div class="target-text">
                <p>打造全新世界观，让你更爱你的生活</p>
            </div>
        </div>
        <div class="target-menu">
            <img src="task07/task07-top2.png" alt="icon">
            <div class="target-text">
                <p>丰富多彩的公益活动，发挥新世界的主人公意识</p>
            </div>
        </div>
        <div class="target-menu">
            <img src="task07/task07-top3.png" alt="icon">
            <div class="target-text">
                <p>时尚的新理念，超前体验未知的生活</p>
            </div>
        </div>
        <div class="target-menu">
            <img src="task07/task07-top4.png" alt="icon">
            <div class="target-text special-menu">
                <p>完善的培养机制，培养你全新的世界观</p>
            </div>
        </div>
    </div>
    <div class="unknow">
        <img src="task07/unknow.png">
        <p>关于新世界，你不知道的还有什么?</p>
    </div>
    <div class="map">
        <img src="task07/task07-pic3.jpg">
        <div class="map-cover"></div>
        <div class="map-content">
            <div class="map-text">
                <h3>查找新世界城市活动信息</h3>
                <div class="map-line"></div>
                <p>每个城市的有不同的活动信息，请自助插叙您所需要了解的城市</p>
            </div>
            <div class="map-search">
                <form method="get" action="">
                    <select name="country">
                        <option value="china" selected>中国</option>
                        <option value="america">美国</option>
                        <option value="cute">二次元</option>
                        <option value="outer">外星球</option>
                        <option value="loler">召唤师峡谷</option>
                    </select>
                    <select name="province">
                        <option value="beijing">北京市</option>
                        <option value="jiangxi">江西省</option>
                        <option value="hebei">河北省</option>
                        <option value="liaoning">辽宁省</option>
                        <option value="tianjing">天津市</option>
                        <option value="warplace">战争学院</option>
                    </select>
                    <select name="city">
                        <option value="beijing">北京市</option>
                        <option value="nanchang">南昌市</option>
                        <option value="shanghai">上海市</option>
                        <option value="shengzheng">深圳市</option>
                        <option value="dongguang">东莞市</option>
                        <option value="warplace">战争学院</option>
                    </select>
                    <input type="submit" value="搜    索">
                </form>
            </div>
        </div>
    </div>
    <div class="gallery">
        <div class="gallery-sum">
            <div class="gallery-pic">
                <img src="task07/task07-mid1.jpg" alt="picture">
                <h4>北京活动</h4>
                <p>新社区大联盟</p>
            </div>
            <div class="gallery-pic spacial-gallery">
                <h4 id="shanghai">上海活动</h4>
                <p id="shanghai-text">夜上海新景观探索</p>
                <img src="task07/task07-mid2.jpg" alt="picture">
            </div>
            <div class="gallery-pic">
                <img src="task07/task07-mid3.jpg" alt="picture">
                <h4>深圳活动</h4>
                <p>全新海岸线观点站</p>
            </div>
            <div class="gallery-pic">
                <img src="task07/task07-mid4.jpg" alt="picture">
                <h4>香港活动</h4>
                <p>奢侈消费大派送</p>
            </div>
        </div>
    </div>
    <div class="world">
        <div class="world-banner">
            <img src="task07/task07-pic2.jpg">
            <div class="world-banner-text">
                <h2>新世界</h2>
                <h1>TIME</h1>
                <h3>@新世界 - 北京</h3>
                <h4>2016.04.01</h4>
            </div>
        </div>
        <div class="world-text">
            <div class="world-title-char"></div>
            <div class="text-sum">
                <div class="text-char"></div>
                <div class="world-text-title">
                    <span>新世界</span><span>01</span>
                </div>
                <p>新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世</p>
                <div class="world-bottom">更多详情</div>
                <div class="world-cycle-sum">
                    <div class="world-cycle"></div>
                    <div class="world-cycle"></div>
                    <div class="world-cycle"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="new">
        <div class="new-banner new-left">
            <div class="new-text">
                <p>新时代</p>
                <p>关于爱生活的我们</p>
                <div class="line"></div>
                <div>
                    <div class="new-bottom first-bottom">查看更多</div>
                </div>
            </div>
        </div>
        <div class="new-banner new-mid">
            <div class="new-text">
                <p>新时代</p>
                <p>关于爱生活的我们</p>
                <div class="line second-line"></div>
                <div>
                    <div class="new-bottom second-bottom">查看更多</div>
                </div>
            </div>
        </div>
        <div class="new-right">
            <img src="task07/task07-pic1.jpg">
            <div class="new-black"></div>
            <div class="new-char"></div>
        </div>
    </div>
    <div class="form">
        <div class="form-title">
            <h3>成为我们的志愿者</h3>
            <div class="form-title-line"></div>
            <p>新世界的大家庭需要每一位爱生活的人的加入，如果你够年轻，有梦想，有激情</p>
            <p>那就不要犹豫，快来加入我们，成为改变所有人生活的人</p>
        </div>
        <div class="form-content">
            <div class="form-info">
                <div class="form-div">
                    <h3>新世界志愿者协议</h3>
                    <p>加入新世界志愿者的人员必须遵守中华人民共和国相关法律法规，并且本着平等资源原则.....</p>
                    <div class="form-footer">
                        <div class="form-arrow"></div>
                        <div class="more">more</div>
                    </div>
                </div>
                <div class="form-div">
                    <h3>新世界志愿者协议</h3>
                    <p>加入新世界志愿者的人员必须遵守中华人民共和国相关法律法规，并且本着平等资源原则.....</p>
                    <div class="form-footer">
                        <div class="form-arrow"></div>
                        <div class="more">more</div>
                    </div>
                </div>
                <div class="form-div">
                    <h3>更多条款</h3>
                    <div class="form-footer">
                        <div class="form-arrow"></div>
                        <div class="more">more</div>
                    </div>
                </div>
            </div>
            <div class="form-text">
                <form method="post" action="" name="joinForm">
                    <label><span>姓名:</span><input type="text" name="name" placeholder="请输入您的姓名"></label>
                    <label><span>年龄:</span><input type="text" name="age" placeholder="请输入您的年龄"></label><br>
                    <label><span>手机:</span><input type="text" name="phone" placeholder="请输入您的手机号码"></label>
                    <label><span>地址:</span><input type="text" name="address" placeholder="请输入您的联系地址"></label>
                    <textarea cols="20" rows="5" name="description" placeholder=" 请简单的描述您梦想的生活"></textarea>
                    <input type="submit" value="提交申请" id="form-submit">
                </form>
            </div>
        </div>
    </div>
    <div class="mail">
        <div class="mail-title">联系我们</div>
        <div class="mail-content">为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我的产品资讯<br>也可以通过以下任何方式关注我们动态</div>
        <form method="post" action="">
            <input type="text" id="form-text" placeholder="memoresun@gmail.com" name="email">
            <input type="submit" id="submit" value="提  交">
        </form>
        <div class="mail-icon">
            <a href="#"><img src="task07/task07-bottom4.png"></a>
            <a href="#"><img src="task07/task07-bottom3.png"></a>
            <a href="#"><img src="task07/task07-bottom2.png"></a>
            <a href="#"><img src="task07/task07-bottom1.png"></a>
        </div>
    </div>
    <div class="footer">
        <div class="copyright">
            <a href="http://memoresun.com">@2016</a>新世界
        </div>
        <div class="back-top">
            <a href="#">Back to top</a>
        </div>
    </div>
</body>
</html>